<script lang="ts" setup>
// import { ref } from 'vue'

import { useGoodsStore } from '@/stores/goods'
const goodsStore = useGoodsStore()

//删除购物车数据
const delCar = (id: any) => {
  goodsStore.delGoodsList(id)
}

defineProps<{
  goods: any
}>()

//修改购物车商品数量
// const onchange=(id:any,num:any)=>{
  
  
//   goodsStore.updateCarNum(id, num)
// }
//更新当前购物车数据的选中状态
// const onchangeRadio=(id:any,flag:any)=>{
//   goodsStore.selectOne(id,flag)

// }
</script>

<template>
  <van-swipe-cell>
    <van-card :price="goods.price?.toFixed(2)" :desc="goods.title"  class="goods-card" :thumb="goods.image">
      <template #thumb>
        <van-checkbox  v-model="goods.checked"></van-checkbox>
        <div class="van-image" style="width: 100%; height: 100%"><img :src="goods.image" class="van-image__img" style="object-fit: cover" /></div>
      </template>

      <template #num>
        <van-stepper min="1" v-model="goods.amount"  theme="round" />
      </template>
    </van-card>
    <template #right>
      <van-button square text="删除" @click="delCar(goods.id)" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
</template>

<style scoped lang="less">
.goods-card {
  margin: 0;
  background-color: white;
  border-bottom: 1px solid grey;
}

.delete-button {
  height: 100%;
}
:deep(.van-card__thumb){
  display: flex;

}
</style>
